<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link href="../../css/myapp.css" rel="stylesheet" />
		<style type="text/css">
			.mui-table-view-cell .icon {
				width: 1.5em;
				height: 1.5em;
				vertical-align: -0.4em;
				fill: currentColor;
				overflow: hidden;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">动态页设置</h1>
		</header>
		<div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span>在动态页打开以下功能：</span>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-youxi"></use>
					</svg>
					<span>游戏</span>
					<div data-type="youxi" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-yuan"></use>
					</svg>
					<span>好友微视</span>
					<div data-type="haoyouweishi" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shangcheng"></use>
					</svg>
					<span>京东购物</span>
					<div data-type="jingdonggouwu" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shezhi"></use>
					</svg>
					<span>企鹅电竞</span>
					<div data-type="qiedianjing" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-QQyundong"></use>
					</svg>
					<span>运动</span>
					<div data-type="yundong" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-qqyinle"></use>
					</svg>
					<span>QQ音乐</span>
					<div data-type="yinyue" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-shangcheng"></use>
					</svg>
					<span>吃喝玩乐</span>
					<div data-type="chihewanle" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<li class="mui-table-view-cell">
					<svg class="icon" aria-hidden="true">
						<use xlink:href="#icon-ketang2"></use>
					</svg>
					<span>腾讯课堂</span>
					<div data-type="tengxunketang" class="mui-switch">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
		</div>

		<script src="../../js/mui.js"></script>
		<script src="../../fonts/iconfont.js"></script>
		<script type="text/javascript">
			//用于自定义设置json对象
			var dongtaiShow;
			mui.init({
				swipeBack: true, //启用右滑关闭功能
				beforeback: function() {
					console.log("页面关闭时保存设置");
					localStorage.setItem("dongtaiShow", JSON.stringify(dongtaiShow));
					var par = plus.webview.getWebviewById("dynamic.html");
					par.evalJS("eachlist('"+JSON.stringify(dongtaiShow)+"')");
					return true;
				}
			});

			dongtaiShow = JSON.parse(localStorage.getItem("dongtaiShow"));
			//console.log("是否存在自定义设置："+dongtaiShow);
			if (dongtaiShow == null) {
				dongtaiShow = {
					"youxi": true,
					"haoyouweishi": true,
					"jingdonggouwu": true,
					"qiedianjing": true,
					"yundong": true,
					"yinyue": true,
					"chihewanle": true,
					"tengxunketang": true
				}
			}
			mui('.mui-table-view .mui-switch').each(function() {
				//循环为每个开关赋值
				var status = this.getAttribute("data-type");
				if (dongtaiShow[status] == true) {
					//console.log(dongtaiShow[status]);
					this.classList.add("mui-active");
				}
				/**
				 * toggle 事件监听
				 */
				this.addEventListener('toggle', function(event) {
					//event.detail.isActive 可直接获取当前状态
					console.log(this.getAttribute("data-type") + "选中状态：" + event.detail.isActive);
					dongtaiShow[this.getAttribute("data-type")] = event.detail.isActive;
				});
			});
			
			mui.plusReady(function(){
				var self = plus.webview.currentWebview();
				self.addEventListener("close",function(){
					console.log("onunload窗口关闭的监听");
				},false);
			});
			
			
		</script>
	</body>

</html>
